<template>
  <div class="chart-settings-container">
    <a-form layout="vertical">
      <!-- 基本设置 -->
      <a-form-item label="图表标题">
        <a-input v-model:value="localOptions.title.text" placeholder="请输入图表标题" @change="emitUpdate" />
      </a-form-item>
      
      <!-- 仪表盘设置 -->
      <a-divider>仪表盘设置</a-divider>
      
      <a-form-item label="最小值">
        <a-input-number 
          v-model:value="localOptions.series[0].min" 
          :min="0" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="最大值">
        <a-input-number 
          v-model:value="localOptions.series[0].max" 
          :min="1" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="当前值">
        <a-input-number 
          v-model:value="localOptions.series[0].data[0].value" 
          :min="localOptions.series[0].min" 
          :max="localOptions.series[0].max" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="仪表盘半径">
        <a-input-number 
          v-model:value="gaugeRadius"
          :min="30" 
          :max="100"
          :formatter="(value: number) => `${value}%`"
          :parser="(value: string) => Number(value.replace('%', ''))"
          style="width: 100%"
          @change="updateGaugeRadius"
        />
      </a-form-item>
      
      <a-form-item label="起始角度">
        <a-input-number 
          v-model:value="localOptions.series[0].startAngle" 
          :min="0" 
          :max="360" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="结束角度">
        <a-input-number 
          v-model:value="localOptions.series[0].endAngle" 
          :min="0" 
          :max="360" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <!-- 进度颜色设置 -->
      <a-divider>进度颜色设置</a-divider>
      
      <a-collapse v-model:activeKey="activeColorKeys">
        <a-collapse-panel 
          v-for="(item, index) in localOptions.series[0].axisLine.lineStyle.color" 
          :key="'color-' + index"
          :header="`区间 ${index + 1}: [${item[0] * 100}%]`"
        >
          <a-form-item label="区间值">
            <a-slider 
              v-model:value="item[0]" 
              :min="0" 
              :max="1" 
              :step="0.01"
              @change="emitUpdate" 
            />
          </a-form-item>
          
          <a-form-item label="区间颜色">
            <a-input 
              v-model:value="item[1]" 
              type="color"
              style="width: 100px" 
              @change="emitUpdate" 
            />
          </a-form-item>
        </a-collapse-panel>
      </a-collapse>
      
      <a-button type="dashed" block @click="addColorRange" style="margin-top: 16px">
        <plus-outlined /> 添加颜色区间
      </a-button>
      
      <!-- 指针设置 -->
      <a-divider>指针设置</a-divider>
      
      <a-form-item label="指针长度">
        <a-slider 
          v-model:value="localOptions.series[0].pointer.length" 
          :min="10" 
          :max="100"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="指针宽度">
        <a-input-number 
          v-model:value="localOptions.series[0].pointer.width" 
          :min="1" 
          :max="20" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <!-- 刻度设置 -->
      <a-divider>刻度设置</a-divider>
      
      <a-form-item label="显示刻度">
        <a-switch v-model:checked="localOptions.series[0].axisTick.show" @change="emitUpdate" />
      </a-form-item>
      
      <a-form-item label="刻度数量">
        <a-input-number 
          v-model:value="localOptions.series[0].splitNumber" 
          :min="1" 
          :max="20" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <!-- 详情设置 -->
      <a-divider>详情设置</a-divider>
      
      <a-form-item label="显示详情">
        <a-switch v-model:checked="localOptions.series[0].detail.show" @change="emitUpdate" />
      </a-form-item>
      
      <a-form-item label="详情格式">
        <a-input 
          v-model:value="localOptions.series[0].detail.formatter" 
          placeholder="如: {value}%" 
          @change="emitUpdate" 
        />
      </a-form-item>
      
      <a-form-item label="字体大小">
        <a-input-number 
          v-model:value="localOptions.series[0].detail.fontSize" 
          :min="10" 
          :max="100" 
          style="width: 100%"
          @change="emitUpdate" 
        />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from 'vue';
import { PlusOutlined } from '@ant-design/icons-vue';

const props = defineProps({
  options: {
    type: Object,
    required: true
  }
});

const emit = defineEmits(['update:options']);

// 本地存储options，用于编辑
const localOptions = ref<any>({
  title: {
    text: '仪表盘',
    show: true
  },
  series: [{
    type: 'gauge',
    min: 0,
    max: 100,
    radius: '75%',
    startAngle: 225,
    endAngle: -45,
    splitNumber: 10,
    pointer: {
      length: 80,
      width: 8
    },
    axisLine: {
      lineStyle: {
        width: 30,
        color: [
          [0.3, '#67e0e3'],
          [0.7, '#37a2da'],
          [1, '#fd666d']
        ]
      }
    },
    axisTick: {
      show: true,
      distance: 0,
      length: 5
    },
    axisLabel: {
      show: true,
      distance: 20
    },
    detail: {
      show: true,
      fontSize: 30,
      offsetCenter: [0, '50%'],
      formatter: '{value}%'
    },
    data: [{
      value: 50,
      name: '完成率'
    }]
  }]
});

// 仪表盘半径
const gaugeRadius = ref(75);

// 活动的颜色面板
const activeColorKeys = ref<string[]>(['color-0']);

// 更新仪表盘半径
const updateGaugeRadius = () => {
  localOptions.value.series[0].radius = `${gaugeRadius.value}%`;
  emitUpdate();
};

// 添加颜色区间
const addColorRange = () => {
  const colorRanges = localOptions.value.series[0].axisLine.lineStyle.color;
  const lastRange = colorRanges[colorRanges.length - 1];
  
  // 确保最大值不超过1
  if (lastRange && lastRange[0] >= 1) {
    return;
  }
  
  // 生成一个新的区间，值为前一个区间值+0.1(或1如果是第一个)，不超过1
  const nextValue = Math.min(lastRange ? lastRange[0] + 0.1 : 0.5, 1);
  const colors = ['#67e0e3', '#37a2da', '#fd666d', '#ffa022', '#44bFDA'];
  const nextColor = colors[colorRanges.length % colors.length];
  
  colorRanges.push([nextValue, nextColor]);
  
  // 添加到活动面板
  activeColorKeys.value.push(`color-${colorRanges.length - 1}`);
  
  emitUpdate();
};

// 向父组件发送更新的options
const emitUpdate = () => {
  emit('update:options', { ...localOptions.value });
};

// 初始化
onMounted(() => {
  // 深拷贝props的options
  if (props.options) {
    localOptions.value = JSON.parse(JSON.stringify(props.options));
    
    // 确保必要的属性存在
    if (!localOptions.value.title) {
      localOptions.value.title = { text: '仪表盘', show: true };
    }
    
    if (!localOptions.value.series || !localOptions.value.series.length) {
      localOptions.value.series = [{
        type: 'gauge',
        min: 0,
        max: 100,
        radius: '75%',
        splitNumber: 10,
        pointer: {
          length: 80,
          width: 8
        },
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [0.3, '#67e0e3'],
              [0.7, '#37a2da'],
              [1, '#fd666d']
            ]
          }
        },
        axisTick: {
          show: true,
          distance: 0,
          length: 5
        },
        axisLabel: {
          show: true,
          distance: 20
        },
        detail: {
          show: true,
          fontSize: 30,
          offsetCenter: [0, '50%'],
          formatter: '{value}%'
        },
        data: [{
          value: 50,
          name: '完成率'
        }]
      }];
    }
    
    // 确保仪表盘类型正确
    if (localOptions.value.series[0] && localOptions.value.series[0].type !== 'gauge') {
      localOptions.value.series[0].type = 'gauge';
    }
    
    // 初始化仪表盘半径
    const radius = localOptions.value.series[0].radius;
    if (typeof radius === 'string' && radius.endsWith('%')) {
      gaugeRadius.value = parseInt(radius, 10);
    } else {
      gaugeRadius.value = 75;
    }
  }
});

// 监听props.options变化
watch(() => props.options, (newOptions) => {
  if (newOptions) {
    localOptions.value = JSON.parse(JSON.stringify(newOptions));
    
    // 更新仪表盘半径
    const radius = localOptions.value.series[0].radius;
    if (typeof radius === 'string' && radius.endsWith('%')) {
      gaugeRadius.value = parseInt(radius, 10);
    } else {
      gaugeRadius.value = 75;
    }
  }
}, { deep: true });
</script>

<style scoped>
.chart-settings-container {
  padding: 16px;
}
</style> 